<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <div class="content header-content">
        <!-- 左边返回箭头 -->
        <div class="back-arrows">
          <img src="yangchaung/images/jt.png" alt="" @click="funs" />
        </div>
        <div class="header-title">
          <h3>提交订单</h3>
        </div>
        <div></div>
      </div>
    </div>
    <!-- 名称价格 -->
    <div class="name-price">
      <div class="content npcontent">
        <div class="text">簋唐楼平日看看单人票</div>
        <div class="money">
          ￥<span ref="moneys">{{ this.$refs.total }}</span>
        </div>
      </div>
    </div>
    <!-- 数量 -->
    <!-- 复用 -->
    <div class="general">
      <div class="content">
        <div class="left">数量</div>
        <div class="right">
          <van-stepper v-model="value" @plus="count()" @minus="minus()" />
        </div>
      </div>
    </div>
    <van-divider />
    <!-- 小计 -->
    <div class="general">
      <div class="content">
        <div class="left">小计</div>
        <div class="right">
          ￥<span ref="total">{{ this.$refs.total }}</span>
        </div>
      </div>
    </div>
    <van-divider />
    <!-- 复用的分隔框 -->
    <div class="divide"></div>
    <!-- 加载 -->
    <van-divider />
    <van-loading size="6.4vw">加载中...</van-loading>
    <!-- 抵用券 -->
    <div class="general">
      <div class="content">
        <div class="left">抵用券</div>
        <div class="right">1张可用></div>
      </div>
    </div>
    <van-divider />
    <!-- 订单合计 -->
    <div class="general">
      <div class="content">
        <div class="left">订单合计</div>
        <div class="right" style="color: #f64f1a">￥{{ this.$refs.total }}</div>
      </div>
    </div>
    <van-divider />
    <div class="divide"></div>
    <!-- 手机号 -->
    <div class="general">
      <div class="content">
        <div class="left">手机号</div>
        <div class="right">153****4405</div>
      </div>
    </div>
    <van-divider />
    <div class="divide"></div>
    <!-- 购买须知 -->
    <div class="general">
      <div class="content">
        <div class="left">购买须知</div>
      </div>
    </div>
    <van-divider />
    <div class="content content-warn">
      <ul class="warn">
        <li>预约须知：请您提前一小时预约</li>
        <li>退款规则：随时退、过期退</li>
        <li>
          为保护未成年人健康成长，未成年用户请得到监护人知悉统一后再进行购买和体验，请勿购买不适合自身年龄段的产品
        </li>
      </ul>
    </div>
    <div class="bottom">
      <div class="bottom-total">
        <div class="content">
          <div class="text">
            <span class="symbol">￥</span>
            <span class="price">{{ this.$refs.total }}</span>
          </div>
          <button>普通支付</button>
        </div>
      </div>
    </div>

    <!-- 订单合计 -->
    <!-- <van-submit-bar  :price="3" button-text="提交订单" :decimal-length='0' label=" " text-align="left"  /> -->
  </div>
</template>

<style lang="scss" scoped>
.content {
  width: 93.067vw;
  height: 100%;
  margin: auto;
  justify-content: space-between;
  display: flex;
}
.all {
  height: 100%;
  width: 100vw;
}
//头部
.header {
  font-size: 4.267vw;
  height: 10.133vw;
  .header-content {
    height: 10.133vw;
    img {
      width: 6.4vw;
    }
  }
}
//名称价格
.name-price {
  height: 16vw;
  background: #f0f0f0;
  .npcontent {
    .text {
      margin: auto;
    }
    .money {
      margin: auto;
    }
  }
}
//数量
.general {
  height: 13.333vw;
  .left {
    margin: auto 0;
  }
  .right {
    margin: auto 0;
  }
}
::v-deep .van-divider {
  margin: 0;
}
//复用的分隔框
.divide {
  background: #e6e6e8;
  width: 100vw;
  height: 2.667vw;
}
//购买须知的内容
.content-warn {
  height: 20.733vw;
  .warn {
    color: #8e8e8e;
    font-size: 3.2vw;
    height: 17.4vw;
    margin: auto 0;
  }
}

.bottom {
  height: 35.2vw;
  background: #e6e6e8;
  width: 100vw;
}
::v-deep .van-stepper__plus {
  color: #f5521a;
  border: 0.267vw solid #f5521a;
  border-radius: 0;
}

::v-deep .van-stepper__minus {
  color: #f5521a;
  border: 0.267vw solid #f5521a;
  border-radius: 0;
}
::v-deep .van-stepper__minus--disabled {
  color: #c8c9cc;
  border: 0.267vw solid #cacaca;
}

.bottom-total {
  width: 100vw;
  position: fixed;
  left: 0;
  bottom: 0;
  height: 15.2vw;
  background: #fff;
  .text {
    margin-top: 5.333vw;
    color: #f64f1a;
    .price {
      font-size: 7.533vw;
    }
  }
  button {
    width: 33.333vw;
    height: 10.667vw;
    border-radius: 4.8vw;
    color: #fff;
    background: #fe6634;
    border: 0.267vw solid #dd8560;
    margin-top: 2.667vw;
  }
}

::v-deep .van-loading {
  display: none;
  background: #e6e6e8;
  color: rgb(246, 79, 26);
  text-align: center;
  height: 13.333vw;
  line-height: 13.333vw;
}
</style>

<script>
export default {
  data() {
    return {
      value: 1,
    };
  },

  beforeMount() {
    console.log(this.$route.query.id);
    this.$refs.total = this.$route.query.title;
    console.log(this.$refs.total);
  },

  methods: {
    funs() {
      this.$router.go(-1);
    },
    //加
    count() {
      // 数量
      let inp = document.querySelector(".van-stepper__input");
      //加载中
      let load = document.querySelector(".van-loading");
      load.style.display = "block";
      setTimeout(function () {
        load.style.display = "none";
      }, 400);

      //小计=数量*商品价格
      this.$refs.total = (inp.value * 1 + 1) * this.$route.query.title;
      console.log(this.$refs.total);
      console.log(inp);
      return this.$refs.total;
    },
    // 减
    minus() {
      // 数量
      let inp = document.querySelector(".van-stepper__input");
      let load = document.querySelector(".van-loading");
      load.style.display = "block";
      setTimeout(function () {
        load.style.display = "none";
      }, 400);
      //小计=数量*商品价格
      this.$refs.total = (inp.value * 1 - 1) * this.$route.query.title;
      console.log(this.$refs.total);
      console.log(inp);
      return this.$refs.total;
    },
  },
};
</script>

